<template>
  <VueDraggableNext ghostClass="ghost" animation="1000" :list="tasks" group="people" class="dragArea">
    <div v-for="el in tasks" :key="el.key" @click.stop="activeDargComponent(el)" class="relative" :style="el.style" :class="{ 'active': activeComponent === el.key }">
      <nested-draggable :tasks="el.children || []" v-if="el.children" class="bg-gray-100 pl-5" :componentsObj="componentsObj" :activeComponent="activeComponent" @activeDargComponent="activeDargComponent" @handlerComponent="handlerComponent" :style="el.style"/>
      <component :is="componentsObj[el.type]" v-else :data="el" class="next-draggable"/>
      <template v-if="activeComponent === el.key">
        <span class="handler-title">{{ el.name }}</span>
        <div class="handler-btn">
          <el-tooltip class="box-item" effect="dark" content="复制" placement="top">
            <SvgIcon iconName="icon-fuzhi" @click.stop="handlerComponent(el,'copy')"></SvgIcon>
          </el-tooltip>
          <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
            <SvgIcon iconName="icon-shanchu" @click.stop="handlerComponent(el,'delete')"></SvgIcon>
          </el-tooltip>
        </div>
      </template>
    </div>
  </VueDraggableNext>
</template>
<script setup>
import { VueDraggableNext } from 'vue-draggable-next'
defineOptions({
  name: 'nested-draggable',
  inheritAttrs: false
})

const emit = defineEmits(['activeDargComponent', 'handlerComponent'])

const props = defineProps({
  tasks: {
    type: Array,
    required: true
  },
  componentsObj: {
    type: Object
  },
  style: {
    type: Object
  },
  activeComponent: null
})
const { tasks, style } = toRefs(props)

const activeDargComponent = (el) => {
  emit('activeDargComponent', el)
}

const handlerComponent = (el, type) => {
  emit('handlerComponent', el, type)
}

const justifyContent = computed(() => {
  return style.value?.justifyContent || 'none'
})

</script>
<style scoped lang="scss">
.pl-5{
  padding: 5px;
  box-sizing: border-box;
}
.bg-gray-100{
  background-color: #f7f7f7;
}
.dragArea {
  min-height: 50px;
  padding: 5px;
  box-sizing: border-box;
  outline: 1px dashed;
  display: flex;
  flex-wrap: wrap;
  justify-content: v-bind(justifyContent);
  .active{
    outline: 1px solid $primary-color;
  }
  .relative{
    cursor: pointer;
    position: relative;
    flex: 1;
    .handler-title{
      top: -28px;
      left: -1px;
      position: absolute;
      padding: 5px;
      background-color: $primary-color;
      color: $white-color;
      border: 1px solid #007bff;
      font-size: 14px !important;
    }
    .handler-btn{
      top: -28px;
      right: -1px;
      position: absolute;
      background-color:$gray-light-color;
      height: 28px;
      border: 1px solid $primary-color;
      box-sizing: border-box;
      border-bottom-color: white;
      svg{
        padding: 5px 5px 0 5px;
        font-size: 14px;
        cursor: pointer;
        &:focus{
          outline: none;
        }
      }
    }
  }
}
.ghost {
  height: 2px !important;
  background-color: #2a83ea !important;
  overflow: hidden;
  outline: 0px !important;
  z-index: 9999;
}
</style>
